/* 上行记录
 * @Author: wujie 
 * @Date: 2018-06-12 11:06:22 
 * @Last Modified by: wujie
 * @Last Modified time: 2018-06-26 14:21:20
 */
import React,{ Component } from 'react'
import components from '@/components/index'
import { Row } from 'antd'
import { connect } from 'react-redux'
import util from '@/utils'
import actions from '@/actions/upStreamRecord'

const { Card, UpStreamRecordSearch, UpStreamRecodTable } = components

class UpStreamRecod extends Component {

  render(){

    const searchProps = util.pick(this.props,[
      'messageId',
      'accessNumber',
      'phone',
      'startTime',
      'endTime'
    ])

    const tableProps = util.pick(this.props,[
      'data',
      'pageNum',
      'pageSize',
      'total',
      'loading'
    ])

    const searchFunProps = util.pick(this, [
      'onChangeMessageId',
      'onChangeAccessNumber',
      'onChangePhone',
      'onChangeStartTime',
      'onChangeEndTime',
      'onSearch',
    ])

    const tableFunProps = util.pick(this, [
      'onChangePagination',
    ])

    return (
      <div >
        <Card title="上行记录">
          <Row style={{padding: 24, backgroundColor: '#fff' }}>
            <UpStreamRecordSearch {...searchProps} {...searchFunProps} />
            <UpStreamRecodTable {...tableProps} {...tableFunProps} />
          </Row>
        </Card>
      </div>
    )
  }

  componentDidMount(){
    this.props.getData()
  }

  onChangeMessageId = ({target: { value }}) => {
    this.props.setMessageId(value)
  }

  onChangeAccessNumber = ({ target: { value }}) => {
    this.props.setAccessNumber(value)
  }

  onChangePhone = ({ target: { value }}) => {
    this.props.setPhone(value)
  }

  onChangeStartTime = (value) => {
    this.props.setStartTime(value)
  }

  onChangeEndTime = (value) => {
    this.props.setEndTime(value)
  }

  onSearch = () => {
    this.props.setPageNum(1)
    this.props.getData()
  }

  onChangePagination = (value) => {
    this.props.setPageNum(value)
    this.props.getData()
  }

} 

const mapStateToProps = (({ upStreamRecordReducer }) => ({ ...upStreamRecordReducer })) 

const mapDispatchToProps = { ...actions }

export default connect(mapStateToProps, mapDispatchToProps)(UpStreamRecod)